<template>
  <div ref="chart" class="chart"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useChart } from '../../hooks/useChart';
const chart = ref();
const { setOptions } = useChart(chart);
const option = {
  grid: {
    show: false,
  },
  xAxis: {
    type: "category",
    data: ["数据", "数据", "数据", "数据", "数据", "数据", "数据"],
    axisLabel: {
      color: '#DCECFF'
    }
  },
  yAxis: {
    type: "value",
    splitLine: { show: false },
    axisLabel: {
      color: '#DCECFF'
    }
  },
  series: [
    {
      data: [30, 52, 88, 90, 50, 91, 70],
      type: "pictorialBar",
      barWidth: "90%",
      barCategoryGap: "10%",
      symbol: "triangle",
      itemStyle: {
        normal: {
          color: function (params) {
            var colorList = [
              "#0054FF",
              "#FEFF84",
              "#FFA184",
              "#00F6FF",
              "#749f83",
              "#FFA184",
              "#FEFF84",
            ];
            return colorList[params.dataIndex];
          },
        },
      },
    },
  ],
};
const initChart = () => {
  setOptions(option);
};

onMounted(() => {
  initChart();
});
</script>